<template>
  <div class="p-6">
    <el-tabs v-model="tabIndex">
      <el-tab-pane label="当前委托" :name="1" />
      <el-tab-pane label="所有委托" :name="2" />
      <el-tab-pane label="成交明细" :name="3" />
      <el-tab-pane label="条件委托" :name="4" />
    </el-tabs>

    <el-table class="my_table" :data="tableData" :border="false">
      <el-table-column prop="prce" label="委托时间" />
      <el-table-column prop="laing" label="合约" />
      <el-table-column prop="all" label="方向">
        <template #default="scope">
          <div v-if="scope.row.type" style="color: red">
            {{ scope.row.all }}
          </div>
          <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="all" label="委托数量">
        <template #default="scope">
          <div v-if="scope.row.type" style="color: red">
            {{ scope.row.all }}
          </div>
          <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="all" label="委托价格">
        <template #default="scope">
          <div v-if="scope.row.type" style="color: red">
            {{ scope.row.all }}
          </div>
          <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="all" label="已成交">
        <template #default="scope">
          <div v-if="scope.row.type" style="color: red">
            {{ scope.row.all }}
          </div>
          <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="all" label="成交价格">
        <template #default="scope">
          <div v-if="scope.row.type" style="color: red">
            {{ scope.row.all }}
          </div>
          <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="all" label="盈亏">
        <template #default="scope">
          <div v-if="scope.row.type" style="color: red">
            {{ scope.row.all }}
          </div>
          <div v-else style="color: #3cb371">{{ scope.row.all }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="p-4 flex justify-end">
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from "vue";

const tabIndex = ref(1);
const tableData = [
  {
    prce: "32.33",
    laing: "510.88",
    all: "888.9",
    type: 0,
  },
  {
    prce: "32.33",
    laing: "510.88",
    all: "888.9",
    type: 1,
  },
];
</script>
